<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="sl" tagdir="/WEB-INF/tags" %>
<%@page import="com.solution.common.config.PublicConfig"%>
<%@page import="com.solution.admin.home.constants.IndexConstants"%>
<%
	String basePath = PublicConfig.ROOT_PATH;
	String imgRootURL = PublicConfig.IMG_ROOT_URL;
	String ossImgZoomWX = PublicConfig.OSS_IMG_ZOOM_WX; //微信图片缩放
%>	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>商品列表</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics_wx/css/style.css?v=20180313">
<style>
.pp_list ul.qxbtn  li i {
   position: absolute;
   cursor: pointer;
   right: 0.2rem;
   top: 50%;
   width: .36rem;
   height: .36rem;
   margin-top: -.17rem;
   background: url(<%=basePath%>/statics_wx/images/icon-q1.png) no-repeat;
    background-size: .35rem .35rem;
}
.pp_list ul.qxbtn  li.current i{ right: 0.2rem;
    top: 50%;
    width: .36rem;
    height: .36rem;
    margin-top: -.17rem;background: url(<%=basePath%>/statics_wx/images/icon-q2.png) no-repeat;background-size:.35rem .35rem;}
}

</style>
<script src="<%=basePath%>/statics_wx/js/jquery.min.js"></script>
<script src="<%=basePath%>/statics_wx/js/js.js"></script>
<script src="<%=basePath%>/statics_wx/js/iscroll.js"></script>
<script src="<%=basePath%>/statics_wx/js/custom.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/plugins/layer/layer.js"></script>
<script>
//系统域名 
var rootPath = '<%=basePath%>';
// 系统上传文件展示域名
var imgRootURL = '<%=imgRootURL%>';

$(function(){
	
	$('.sxbtn').click(function(){$(this).toggleClass('current');
		$('.bjd_list1').toggleClass('current');
	})
	
	//标记报价单当前操作的是哪个模块
	$('.fl_nav1 ul li a').click(function(){
		$(this).parent().siblings().removeClass('current');
		$(this).parent().toggleClass('current');
		//判断品牌是否有选择
		if ($("#brand_box ul li").hasClass("current")){
			$("#brandbtn").parent().addClass('current'); 
		}
	});
	
	if (!$('.fl_nav1 ul li').hasClass("current")) { console.log(123)
		$("#sortLi").addClass("current");
	}
	
	//点击分类和品牌的筛选框空白处，关闭筛选框
	$('body').on('click', function(e){
		//alert($(e.target).attr('class'))
		if ($(e.target).attr('class') == 'fl_dropdown') {
			$('.fl_dropdown').hide();
		} else if ($(e.target).attr('class') == "overlay") {
			$('.overlay').hide();
		}
	})
	
	// 关键字查询
	$("#search_key").keydown(function(event){
		if(event.keyCode==13){ 
			funKeywordSearch();
		} 
	});
	
	//搜索
	$("#doSearch").click(function(){
		funKeywordSearch();
	});
	
	function funKeywordSearch() {
		var search_key = $("#search_key").val();
		url = rootPath + "/wx/product/search";
		var form = $('<form></form>');  
		form.attr('action', url);
		form.attr('method', 'post');
		form.attr('target', '_self');
		form.append("<input type=\"hidden\" name=\"searchKey\" value=\""+search_key+"\"/>");
		form.appendTo("body");
		form.submit();
	}
	
	$('a#icon_sx,.sx_box .hd span a').click(function(){$('#sx_box').toggle();});

	$('.sx_box dl dt h2 a').click(function(){$(this).toggleClass('current');$(this).parent().next().toggle();});
	$('.list3 ul li a').click(function(){$(this).parent().toggleClass('current');$(this).parent().siblings().removeClass('current')});
	
	$('#pricebtn').click(function(){
		$(this).parent().toggleClass('current');
		$('#brand_box,#fl_box').hide();
		var brand_ids = [];
		$("#brand_container li.current").each(function(){
			brand_ids.push($(this).find("a").attr("brand_id"));
		});
		var search_condition = [];
		$("#filter_property li.current").each(function(){
			var filter_a = $(this).find("a");
			var property_name = filter_a.attr("property_name");
			var property_value = filter_a.attr("property_value");
			var filter = {"propertyName":property_name,"propertyValue":property_value};
			search_condition.push(filter);
		});
		var search_key = $("#search_key").val();
		var sortType = $("#sync_sortType").val().trim();
		if(sortType == "ASC") {
			sortType = "DESC";
		} else {
			sortType = "ASC";
		}
		var min_price = $("#min_price").val();
		var max_price = $("#max_price").val();
		var search_key = $("#search_key").val();
		url = rootPath + "/wx/product/search";
		var form = $('<form></form>');  
	    form.attr('action', url);
	    form.attr('method', 'post');
	    form.attr('target', '_self');
	    form.append('<input type="hidden" name="sortField" value="BASE_PRICE"/>');
	    form.append('<input type="hidden" name="sortType" value="'+sortType+'"/>');
	    form.append("<input type=\"hidden\" name=\"minPrice\" value=\""+min_price+"\"/>");
	    form.append("<input type=\"hidden\" name=\"maxPrice\" value=\""+max_price+"\"/>");
	    form.append("<input type=\"hidden\" name=\"searchKey\" value=\""+search_key+"\"/>");
	    form.append("<input type=\"hidden\" name=\"brandIds\" value=\""+brand_ids.join(",")+"\"/>");
	    form.append("<input type=\"hidden\" name=\"propertyFilter\" value='"+JSON.stringify(search_condition)+"'/>");
	    form.appendTo("body");
	    form.submit();
	});	
	//点击全部商品按钮事件 
	$('#defaultbtn').click(function(){
		var brand_ids = [];
		$("#brand_container li.current").each(function(){
			brand_ids.push($(this).find("a").attr("brand_id"));
		});
		var search_condition = [];
		$("#filter_property li.current").each(function(){
			var filter_a = $(this).find("a");
			var property_name = filter_a.attr("property_name");
			var property_value = filter_a.attr("property_value");
			var filter = {"propertyName":property_name,"propertyValue":property_value};
			search_condition.push(filter);
		});
		var min_price = $("#min_price").val();
		var max_price = $("#max_price").val();
		var search_key = $("#search_key").val();
		url = rootPath + "/wx/product/search";
		var form = $('<form></form>');  
	    form.attr('action', url);
	    form.attr('method', 'post');
	    form.attr('target', '_self');
	    form.append('<input type="hidden" name="sortField" value="SORT_NO"/>');
	    form.append('<input type="hidden" name="sortType" value="ASC"/>');
	    //form.append("<input type=\"hidden\" name=\"minPrice\" value=\""+min_price+"\"/>");
	    //form.append("<input type=\"hidden\" name=\"maxPrice\" value=\""+max_price+"\"/>");
	    //form.append("<input type=\"hidden\" name=\"searchKey\" value=\""+search_key+"\"/>");
	    //form.append("<input type=\"hidden\" name=\"brandIds\" value=\""+brand_ids.join(",")+"\"/>");
	    //form.append("<input type=\"hidden\" name=\"propertyFilter\" value='"+JSON.stringify(search_condition)+"'/>");
	    form.appendTo("body");
	    form.submit();
	});	
	$('#brandbtn').click(function(){
		$('#brand_box').toggle();
		//$(this).parent().toggleClass('current');
		//$(this).parent().siblings().removeClass('current');
	});
	
	// 品牌条件筛选
	$("#brand_container a").click(function(){
		$(this).closest("li").toggleClass("current");
		
		//判断选项是否都已选择
		var lis = $("#brand_container li");
		var clis = $("#brand_container").find(".current"); 
		if (lis.length == clis.length) {
			$('#brand_box .qxbtn li').addClass('current');
		} else {
			$('#brand_box .qxbtn li').removeClass('current');
		}
	});
	
	// 根据品牌查询
	$("#btn_brand_search").click(function(){
		var brand_ids = [];
		$("#brand_container li.current").each(function(){
			brand_ids.push($(this).find("a").attr("brand_id"));
		});
		
		var search_key = $("#search_key").val();
		url = rootPath + "/wx/product/search";
		var form = $('<form></form>');  
	    form.attr('action', url);
	    form.attr('method', 'post');
	    form.attr('target', '_self');
	    form.append('<input type="hidden" name="brandIds" value="'+brand_ids.join(",")+'"/>');
	    form.append('<input type="hidden" name="searchKey" value="'+search_key+'"/>');
	    form.appendTo("body");
	    form.submit();
	});
	
	//全选/全不选子分类
	$('#brand_box .qxbtn li').click(function(){
		$(this).toggleClass('current');
		if($(this).hasClass('current')) {
			$("#brand_container li").removeClass('current').addClass('current');
		} else {
			$("#brand_container li").toggleClass('current');
		}
	});
	
	// 品牌查询条件重置
	$("#btn_brand_reset").click(function(){
		$('#brand_box .qxbtn li').removeClass("current");
		$("#brand_container li").removeClass("current");
	});
	
	// 条件筛选项选择
	$("#btn_filter_search").click(function(){
		var search_condition = [];
		var brand_ids = [];
		$("#filter_brand li.current").each(function(){
			brand_ids.push($(this).find("a").attr("brand_id"));
		});
		$("#filter_property li.current").each(function(){
			var filter_a = $(this).find("a");
			var property_name = filter_a.attr("property_name");
			var property_value = filter_a.attr("property_value");
			var filter = {"propertyName":property_name,"propertyValue":property_value};
			search_condition.push(filter);
		});
		var search_key = $("#search_key").val();
		var min_price = $("#min_price").val();
		var max_price = $("#max_price").val();
		url = rootPath + "/wx/product/search";
		var form = $('<form></form>');  
	    form.attr('action', url);
	    form.attr('method', 'post');
	    form.attr('target', '_self');
	    form.append("<input type=\"hidden\" name=\"minPrice\" value=\""+min_price+"\"/>");
	    form.append("<input type=\"hidden\" name=\"maxPrice\" value=\""+max_price+"\"/>");
	    form.append("<input type=\"hidden\" name=\"searchKey\" value=\""+search_key+"\"/>");
	    form.append("<input type=\"hidden\" name=\"brandIds\" value=\""+brand_ids.join(",")+"\"/>");
	    form.append("<input type=\"hidden\" name=\"propertyFilter\" value='"+JSON.stringify(search_condition)+"'/>");
	    form.appendTo("body");
	    form.submit();
	});
	
	// 筛选项条件重置
	$("#btn_filter_reset").click(function(){
		$("#filter_brand li").removeClass("current");
		$("#filter_property li").removeClass("current");
	});
	
	
	function initSpecCheck(container , main_product_price){
		container.find('li label').click(function(){
			if($(this).hasClass('checked')){
				$(this).addClass('checked');
			}else{
				$(this).addClass('checked');
				$(this).parent().siblings().find('label').removeClass('checked');
			}
			var spec_price = 0;
			$('.good_sxlist ul li label.checked').each(function(){
				spec_price = spec_price + parseFloat($(this).parent().attr("spec_price"));
			});
			var last_price = spec_price + parseFloat(main_product_price);
			
			container.parent().find("#v_product_price").html("￥<em>"+numberInteger(last_price)+"</em><span>"+numberDecimal(last_price)+"</span>");
		});
	}
	
	// initSpecCheck();
	
	// 关闭端口规格项筛选弹层
	$("#btn_close_product_spec").click(function(){
		$('#goods_editbox').toggle();
	});
	
	// 绑定添加购物车事件
	function init_add_to_shoppingcart(this_){
		// 商品名称 价格 从页面上取
		var product_name = this_.closest("h3").find("#product_name").val();
		var product_price_integer = this_.closest("h3").find("#product_price_integer").val();
		var product_price_deciaml = this_.closest("h3").find("#product_price_decimal").val();
		var product_image = this_.closest("h3").find("#product_image").val();
		var product_id = this_.attr("product_id");
		
		var main_product_price = this_.closest("h3").find("#main_product_price").val();
		
		$("#v_product_image").attr("src",imgRootURL+"/"+product_image);
		$("#v_product_name").text(product_name);
		$("#v_product_price").html("￥<em>"+product_price_integer+"</em><span>."+product_price_deciaml+"</span>");
		$("#v_product_id").val(product_id);
		
		var self = this_;
		
		// 查询商品规格项
		// 添加购物车
		var url = rootPath + "/wx/product/listProductSpec";
		var params = {
			productId : product_id
		};
		$.ajax({
			type : "post",
			url : url,
			data : params,
			datatype : "json",
			success : function(json) {
				if(json){
					$("#spec_container").html("");
					var has_spec = json.has_spec;
					if(has_spec == "true"){
						// 商品规格 
						var product_spec = json.product_spec;
						for(var i = 0 ; i < product_spec.length; i++){
							var spec = product_spec[i];
							var spec_value_list = spec.productSpecList;
							
							var spec_value_str = "";
							for(var j = 0; j <spec_value_list.length; j++){
								var spec_value = spec_value_list[j];
								spec_value_str += 
									"<li spec_price=\""+spec_value.specPrice+"\">"+
	                        			"<label "+(j == 0 ? "class='checked'" : "")+" spec_id=\""+spec_value.id+"\" >"+spec_value.specValue+"</label>"+
		                        	"</li>";
							}
							
							var product_spec_str = ""+ 
									"<div name=\"spec_list\" class=\"hd\">"+
					            		"<h3>"+spec.specName+"</h3>"+
						            "</div>"+
						            "<div class=\"bd\">"+
						            	"<div class=\"good_sxlist\">"+
						                	"<ul>"+
						                		spec_value_str+
						                    "</ul>"+
						                "</div>"+
						            "</div>";
							$("#spec_container").append($(product_spec_str));
							initSpecCheck($("#spec_container"),main_product_price);
						}
					}
					$('#goods_editbox').toggle();
				}
			},
			error : function() {
				layer.msg('暂时无法查询商品规格项',{time:1000});
			}
		});
	}
	
	// 异步查询规格项,弹出规格项
	$("a[id='btn_add_to_shoppingcart']").each(function(){
		$(this).click(function(){
			init_add_to_shoppingcart($(this));
		});
	});
	
	// 减少购买数量
	$("#btn_reduce_buy_num").click(function(){
		var buy_num = $("#v_buy_num").val();
		if(buy_num != 1){
			$("#v_buy_num").val(parseInt(buy_num)-1);
		}
		
	});
	// 增加购买数量
	$("#btn_add_buy_num").click(function(){
		var buy_num = $("#v_buy_num").val();
		$("#v_buy_num").val(parseInt(buy_num)+1);
	});
	
	// 确认添加到的购物车
	$("#btn_buy_confirm").click(function(){
		// 规格项选择
		var flag = true;
		var spec = [];
		$("div[name='spec_list']").each(function(){
			var spec_name= $(this).find("h3").text();
			var select_li = $(this).next("div.bd").find("label.checked");
			var selected_num = select_li.length;
			if(selected_num == 0){
				layer.msg('请选择'+spec_name,{time:2000});
				flag = false;
			}else{
				select_li.each(function(){
					spec.push({id:$(this).attr("spec_id"),specName:spec_name,specValue:$(this).text()});
				});
			}
		});
		
		if(!flag){
			return false;
		}
		
		// 添加购物车
		var url = rootPath + "/wx/shoppingcart/add";
		var params = {
			productId : $("#v_product_id").val(),
			buyNum : 1,
			addFlag : 1,
			specListJson:JSON.stringify(spec)
		};
		$.ajax({
			type : "post",
			url : url,
			data : params,
			datatype : "json",
			success : function(json) {
				if (json.resultCode == '1') {
					layer.msg('加入购物车成功',{time:1000});
					$('#goods_editbox').toggle();
				}
			},
			error : function() {
				layer.msg('暂时无法加入购物车',{time:1000});
			}
		});
	});
	
	
	// 上拉加载更多
	$(window).on('scroll',function(){
	    if($(window).scrollTop()>=$(document).height()-$(window).height()){
	    	
	    	var page_count = $("#sync_page_count").val();
	    	var current_page = $("#sync_page_num").val();
	    	if(parseInt(current_page) >= parseInt(page_count)){
	    		//layer.msg('已经到底了',{time:500});
	    		return false;
	    	}
	      	var params = "requestType=sync";
	    	$("input[id^='sync_']").each(function(){
	    		if($(this).attr("pname") == "pageNum"){
	    			params = params + "&"+$(this).attr("pname")+"="+(parseInt($(this).val())+1);
	    		}else{
	    			params = params + "&"+$(this).attr("pname")+"="+$(this).val();
	    		}
	      	});
			var url = rootPath + "/wx/product/search";
			$.ajax({
				type : "post",
				url : url,
				data : params,
				datatype : "json",
				success : function(jsonObject) {
					var json = $.parseJSON(jsonObject);
					$("#sync_page_num").val(json.currentPage);
					if(json.recordList){
						$("#load_more_div").remove();
						for(var i = 0 ; i < json.recordList.length; i++){
							var product = json.recordList[i];
							var product_str = "<li>"+
									            	"<div class=\"box4\">"+
									                	"<div class=\"pic\">"+
									                    	"<a href=\""+rootPath+"/wx/product/detail?productId="+product.id+"\"><img src=\""+imgRootURL+"/"+product.mainImagePath+"?x-oss-process=image/resize,p_80\" /></a>"+
									                    "</div>"+
									                    "<div class=\"item-info\">"+
									                    	"<a href=\""+rootPath+"/wx/product/detail?productId="+product.id+"\"><h2>"+product.productName+"</h2></a>"+
									                        "<h3>"+
									                        	"<strong>¥<em>"+product.productPriceInteger+"</em>."+product.productPriceDecimal+"</strong>"+
									                        	"<input type=\"hidden\" id=\"product_name\" value=\""+product.productName+"\"/>"+
																"<input type=\"hidden\" id=\"product_image\" value=\""+product.mainImagePath+"\"/>"+
																"<input type=\"hidden\" id=\"product_price_integer\" value=\""+product.productPriceInteger+"\"/>"+
																"<input type=\"hidden\" id=\"product_price_decimal\" value=\""+product.productPriceDecimal+"\"/>"+
									                        	"<b>"+
									                        		"<a href=\"javascript:void(0)\" product_id=\""+product.id+"\" id=\"btn_add_to_shoppingcart\"></a>"+
									                        	"</b>"+
									                        "</h3>"+
									                    "</div>"+
									                "</div>"+
									            "</li>";
							$("#product_list").append($(product_str));
						}
						
						
						var load_more = "<li id=\"load_more_div\">"+
									            "<div class=\"box4\" style=\"text-align:center;\">"+
							                	"<h2>加载中.......</h2>"+
							                "</div>"+
							            "</li>";
							            if(json.currentPage  == json.pageCount){
							load_more = "<li id=\"load_more_div\">"+
									            "<div class=\"box4\" style=\"text-align:center;\">"+
							                	"<h2>没有更多内容啦</h2>"+
							                "</div>"+
							            "</li>";
						}
						$("#product_list").append($(load_more));
						
						// 异步查询规格项,弹出规格项
						$("a[id='btn_add_to_shoppingcart']").each(function(){
							$(this).click(function(){
								init_add_to_shoppingcart($(this));
							});
						});
					}
				},
				error : function() {
					layer.msg('查询商品失败',{time:1000});
				}
			});
	    }
	})
});



$(function() {
	var sortFiled = $("#sync_sortField").val().trim();
	if(sortFiled == 'BASE_PRICE') {
		$("#priceLi").addClass("current");
	}  
	var sortType = $("#sync_sortType").val();
});


</script>

</head>
<body style="background:#f5f5f5">
<c:set var="rootPath" value="<%=basePath %>"></c:set>
<c:set var="imgRootURL" value="<%=imgRootURL %>"></c:set>
<c:set var="ossImgZoomWX" value="<%=ossImgZoomWX %>"></c:set>

<c:forEach items="${hiddenParamMap }" var="item">
	<input type="hidden"  id="sync_${item.key }" pname="${item.key}" value="${item.value}"/>
</c:forEach>
<input type="hidden"  id="sync_page_num" pname="pageNum"  value="${pageBean.currentPage }"/>
<input type="hidden"  id="sync_num_per_page" pname="numPerPage" value="${pageBean.numPerPage}"/>
<input type="hidden"  id="sync_page_count"  pname="pageCount" value="${pageBean.pageCount }"/>

<input type="hidden"  id="sync_sortField"  value="${sortField}"/>
<input type="hidden"  id="sync_sortType"  value="${sortType}"/>

<input type="hidden"  id="sync_search_key"  value="${searchKey}"/>
<div class="headerfixed"></div>
	<%--添加购物车弹出规格项 --%>
	<div class="overlay" id="goods_editbox" style="display:none;">
		<div class="goods_editbox">
		<a id="btn_close_product_spec" href="javascript:void(0)" class="icon_close"></a>
	    <div class="goods_editbox_con">
	    	<input type="hidden"  id="v_product_id"  value=""/>
 	    	<div class="good_info1">
	        	<div class="pic">
	            	<img id="v_product_image" src="${rootPath}/statics/images/index_icon1.png" />
	            </div>
	            <div class="item-info">
	            	<h2 id="v_product_name"></h2>
	                <h3 id="v_product_price"></h3>
	            </div>
	        </div>
	        <div class="good_info2"  id="spec_container">
	           
	        </div>
	        <div class="good_info3">
	        	<strong>数量</strong>
	            <div class="txt1">
	            	<b>
						<a href="javascript:void(0)" id="btn_reduce_buy_num" class="icon_jian_gray"></a>
						<span>
							<input type="text" id="v_buy_num" value="1" >
						</span>
						<a href="javascript:void(0)" id="btn_add_buy_num" class="icon_jia"></a>
					</b>
	            </div>
	        </div>
	    </div>
	    <div class="bottom">
	    	<p>
	        	<input type="button" id="btn_buy_confirm" class="inputbtn1" value="确定" />
	        </p>
	    </div>
	</div>
</div>


<div class="overlay" style="display:none" id="sx_box">
	<div class="sx_box">
		<div class="bd">
			<dl>
				<dt>
					<h2><strong>价格区间</strong><a href="javascript:void(0)"><b><span>全部</span><i></i></b></a></h2>
                    <div class="list4">
                    	<div class="list4_con">
                        	<ul>
                            	<li>
                                	<input type="text" id="min_price" value="${minPrice == 0 ? '' : minPrice}" class="inputstyle1" placeholder="最低价" />
                                </li><span>-</span>
                                <li>
                                	<input type="text" id="max_price" value="${maxPrice == 999999999 ? '' : maxPrice}" class="inputstyle1" placeholder="最高价" />
                                </li>
                            </ul>
                        </div>
                    </div>
				</dt>
				<dt>
					<h2><strong>品牌</strong><a href="javascript:void(0)"><b><span>全部</span><i></i></b></a></h2>
					<div class="list3">
						<ul id="filter_brand">
							<c:forEach items="${brandList }" var="brand">
								<li ${requestParamMap[brand.brandCode] != null ? "class='current'" : ""}>
									<a href="javascript:void(0)" brand_id="${brand.brandCode }">${brand.brandNameCh}</a>
								</li>
								<c:forEach items="${brand.subBrandList }" var="subBrand">
									<li ${requestParamMap[subBrand.brandCode] != null ? "class='current'" : ""}>
										<a href="javascript:void(0)"  brand_id="${brand.brandCode }">${subBrand.brandNameCh}</a>
									</li>
								</c:forEach>
							</c:forEach>
						</ul>
					</div>
				</dt>
				
				<c:forEach items="${filterList }" var="filter">
				<dt>
					<h2><strong>${filter.propertyName}</strong><a href="javascript:void(0)"><b><span>全部</span><i></i></b></a></h2>
					<div class="list3">
						<ul id="filter_property">
							<c:forEach items="${filter.propertyValueList}" var="pv">
							<li ${requestParamMap[filter.propertyName] == pv ? "class='current'" : ""}>
								<a href="javascript:void(0)" property_name="${filter.propertyName}"  property_value="${pv}">${pv}</a>
							</li>
							</c:forEach>
						</ul>
					</div>
				</dt>
				</c:forEach>
			</dl>
		</div>
		<div class="height6"></div>
		<div class="bottom">
			<ul>
				<li>
					<a href="javascript:void(0)" id="btn_filter_reset" class="btn1">重置</a>
				</li>
				<li>
					<a href="javascript:void(0)" id="btn_filter_search" class="btn2">确定</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="search_part13">
	<div class="search_part13_con">
		<div class="search_part13_con1">
	    	<i></i>
	        <p>
	        	<input type="text" id="search_key" name="searchKey" class="inputstyle1" value="${searchKey}" placeholder="一体机" />
	        </p>
	        <a id="doSearch" href="javascript:void(0);">搜索<u></u></a>
	    </div>
	    <a href="#" class="sxbtn" style="margin-left:2px;"></a>
    </div>
</div>
<div class="headerfixed2" style="height:1rem"></div>
<div class="fl_nav1" style="z-index:99;">
	<ul>
    	<li id="sortLi">
        	<a href="javascript:void(0)" id="defaultbtn"><span>全部商品</span></a>
        </li>
        <li id="priceLi">
        	<a href="javascript:void(0)" id="pricebtn"><span>价格</span>
        		<c:choose>
					<c:when test="${sortField eq 'BASE_PRICE' }">
						<img src="<%=basePath %>/statics/images/${sortType}.png" style="vertical-align: middle;" />
					</c:when>
					<c:otherwise>
						<em></em>
					</c:otherwise>
				</c:choose>
        	</a>
        </li>
        <li  <c:if test="${ not empty brandIds }">class="current"</c:if> >
        	<a href="javascript:void(0)" id="brandbtn"><span>品牌</span><i></i></a>
        </li>
        <li>
        	<a href="javascript:void(0)" id="icon_sx"><span>筛选</span><i class="a1"></i></a>
        </li>
    </ul>
</div>

<%--品牌筛选弹层 --%>
<div class="fl_dropdown" style="display:none;" id="brand_box">
	<div class="pp_box">
    	<%-- <div class="pp_left">
        	<ul id="brand_container">
        		<c:forEach items="${brandList}" var="brand" varStatus="ind">
        		<li> <!-- ${ind.index == 0 ? 'class="current"':''} -->
                	<a href="javascript:void(0)" brand_id="${brand.brandCode}" sub_brand_list_json="${brand.subBrandListStr }">${brand.brandNameCh}<i></i></a>
                </li>
        		</c:forEach>
            </ul>
        </div>
        <div class="pp_right">
        	<div class="pp_list">
        		<c:forEach items="${brandList}" var="brand" varStatus="ind">
            	<ul  id="sub_brand_container_${brand.brandCode}">
            	<c:if test="${ind.index == 0 }">
            		<c:forEach items="${defaultSubBrandList }" var="fbrand">
            			<li>
            				<a href="javascript:void(0)" brand_id="${fbrand.brandCode}"><span>${fbrand.brandNameCh}</span><i></i></a>
            			</li>
            		</c:forEach>
            	</c:if>
                </ul>
                </c:forEach>
            </div>
        </div> --%>
        <style>
        .pp_list ul.fl_list11 li{border-bottom:0.02rem solid #efefef}
		.pp_list ul.fl_list11 li a{font-size:0.28rem;}
        </style>
        <div class="pp_right" style="margin-left: .2rem;margin-right:0.2rem">
        	<div class="pp_list" >
        		<ul class="qxbtn">
	        		<li style="text-align:right;border-bottom:0.02rem solid #ddd;"><a href="javascript:void(0)" style="padding-right:0.7rem"><span>全选</span><i></i></a></li>
        		</ul>
        		
        		<ul class="fl_list11"  id="brand_container">
            	<c:forEach items="${brandList}" var="brand" varStatus="ind">
	            		<li ${requestParamMap[brand.brandCode] != null ? "class='current'" : ""}>
	            			<a href="javascript:void(0)" brand_id="${brand.brandCode}" >${brand.brandNameCh}<i></i></a>
	            		</li>
                </c:forEach>
	           </ul>
            </div>
        </div>
        
        <div class="operate_part">
        	<ul>
            	<li style="width:50%">
                	<a href="javascript:void(0)" id="btn_brand_reset" class="btn1">重置</a>
                </li>
                <li style="width:50%">
                	<a href="javascript:void(0)" id="btn_brand_search" class="btn2">确定</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<%--

--%>
<div class="fl_dropdown" style="display:none" id="fl_box">
	<div class="pp_box">
    	<div class="pp_left">
        	<ul>
            	<li class="current">
                	<a href="javascript:void(0)">台式机<i></i></a>
                </li>
                <li>
                	<a href="javascript:void(0)">笔记本<i></i></a>
                </li>
                <li>
                	<a href="javascript:void(0)">一体机<i></i></a>
                </li>
                <li>
                	<a href="javascript:void(0)">显示器<i></i></a>
                </li>
                <li>
                	<a href="javascript:void(0)">工作站<i></i></a>
                </li>
                <li>
                	<a href="javascript:void(0)">电脑周边<i></i></a>
                </li>
            </ul>
        </div>
        <div class="pp_right">
        	<div class="pp_list">
            	<ul>
                	<li>
                    	<a href="javascript:void(0)"><span>启天B400</span><i></i></a>
                    </li>
                    <li  class="current">
                    	<a href="javascript:void(0)"><span>启天B415</span><i></i></a>
                    </li>
                    <li>
                    	<a href="javascript:void(0)"><span>启天B425</span><i></i></a>
                    </li>
                    <li>
                    	<a href="javascript:void(0)"><span>启天M450</span><i></i></a>
                    </li>
                    <li>
                    	<a href="javascript:void(0)"><span>启天M451</span><i></i></a>
                    </li>
                    <li>
                    	<a href="javascript:void(0)"><span>启天M462</span><i></i></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="operate_part">
        	<ul>
            	<li>
                	<a href="javascript:void(0)" class="btn1">重置</a>
                </li>
                <li>
                	<a href="javascript:void(0)" id="btn_" class="btn2">确定</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="bjd_list1"  id="product_scroll_wrapper">
	<div class="bjd_list1_con">
    	<ul id="product_list">
    		<c:forEach items="${productList}" var="product">
    		<li>
            	<div class="box4">
                	<div class="pic">
                    	<a href="${rootPath}/wx/product/detail?productId=${product.id}"><img src="${imgRootURL}/${product.mainImagePath}${ossImgZoomWX}" /></a>
                    </div>
                    <div class="item-info">
                    	<a href="${rootPath}/wx/product/detail?productId=${product.id}"><h2>${product.productName }</h2></a>
                        <h3>
                        	<strong>¥<em>${product.productPriceInteger }</em>.${product.productPriceDecimal }</strong>
                        	<input type="hidden" id="product_name" value="${product.productName }"/>
							<input type="hidden" id="product_image" value="${product.mainImagePath }"/>
							<input type="hidden" id="product_price_integer" value="${product.productPriceInteger }"/>
							<input type="hidden" id="product_price_decimal" value="${product.productPriceDecimal }"/>
							<input type="hidden" id="main_product_price" value="${product.mainProductPrice }"/>
                        	<b>
                        		<a href="javascript:void(0)" product_id="${product.id}" id="btn_add_to_shoppingcart"></a>
                        	</b>
                        </h3>
                    </div>
                </div>
                <u></u>
            </li>
    		</c:forEach>
    		
    		<c:if test="${pageBean.pageCount == 0 }">
            	<li id="load_more_div">
            		<div class="box4" style="text-align:center;">
						<h2>查询无数据</h2>
					</div>
				</li>
            </c:if>
            <c:if test="${pageBean.pageCount == pageBean.currentPage }">
            	<li id="load_more_div">
            		<div class="box4" style="text-align:center;">
						<h2>没有更多数据啦</h2>
					</div>
				</li>
            </c:if>
            <c:if test="${pageBean.pageCount > 0 && pageBean.pageCount != pageBean.currentPage }">
            	<li id="load_more_div">
            		<div class="box4" style="text-align:center;">
						<h2>加载中.......</h2>
					</div>
				</li>
            </c:if>
    		
        </ul>
    </div>
</div>
<jsp:include page="../wx_footer.jsp" />
<style>
	.search_part13_con .sxbtn{position:absolute;right:0.15rem;width:0.64rem;height:0.64rem;background:url(${rootPath}/statics_wx/images/icon_lb2.png) no-repeat center center;top:0;background-size:0.46rem 0.46rem}
	.search_part13_con .sxbtn.current{background:url(${rootPath}/statics_wx/images/icon_lb1.png) no-repeat center center;background-size:0.46rem 0.46rem}
	.search_part13_con{padding-right:0rem;padding-right:1rem;position:relative}
	.bjd_list1.current .bjd_list1_con ul li{float:left;width:50%;border-bottom: 0.04rem solid #e8e8e8;position:relative}
	.bjd_list1.current .bjd_list1_con ul li u{position:absolute;right:0;top:0;width:0.04rem;height:100%;background:#e8e8e8}
	.bjd_list1.current .bjd_list1_con ul li:nth-of-type(2n) u{background:none}
	.bjd_list1.current .bjd_list1_con ul li .box4 .pic{float:none;text-align:center;}
	.bjd_list1.current .bjd_list1_con ul li .box4 .item-info{margin-left:0;height:auto;border-bottom:none; }
	.bjd_list1.current .bjd_list1_con ul li .box4{padding:0 0.15rem;}
	.bjd_list1.current  .bjd_list1_con ul li .box4 .pic img{width:2.5rem;height:2.5rem;}
	.bjd_list1.current .bjd_list1_con ul li .box4 .item-info h2{margin-right:0;margin-bottom:0.15rem;height:0.72rem;overflow:hidden;word-break: break-all}
	.bjd_list1.current  .bjd_list1_con ul li .box4 .item-info h3{position:relative;}
	.bjd_list1.current .bjd_list1_con ul li .box4 .item-info h3 b{margin-top:-0.08rem;}
</style>
</body>
</html>